<template>
    <div>
        <vxe-input v-model="searchName" placeholder="选择图标" @click="open">
            <template #prefix>
                <svg-icon :icon-class="searchName" class="-mb-[2px]" color="#606266" />
            </template>
        </vxe-input>

        <vxe-modal v-model="showPopup" title="图标选择器" :width="900" :position="{ top: 90 }">
            <div class="icon-picker-container">
                <!-- 标签页 -->
                <vxe-tabs v-model="activeTab">
                    <vxe-tab-pane name="svg" title="SVG图标"></vxe-tab-pane>
                    <vxe-tab-pane name="vxe" title="VXE图标"></vxe-tab-pane>
                    <vxe-tab-pane name="element" title="Element图标"></vxe-tab-pane>
                </vxe-tabs>

                <!-- 搜索框 -->
                <vxe-input v-model="searchText" placeholder="搜索图标" @input="filterIcons" class="search-input" />
                <!-- 图标列表 -->
                <div class="icon-list">
                    <div v-for="icon in filteredIcons" :key="icon" class="icon-item" @click="selectIcon(icon)">
                        <div class="icon-preview">
                            <!-- 根据标签页显示不同类型图标 -->
                            <svg-icon :icon-class="icon" size="2" />
                        </div>
                        <div class="icon-name">{{ icon }}</div>
                    </div>
                </div>
            </div>
        </vxe-modal>
    </div>
</template>

<script>
import { svgIcons, elementIcons, vxeIcons } from './icon-list'

export default {
    name: "YIconPicker",
    props: {
        value: String,
    },
    data() {
        return {
            showPopup: false,
            activeTab: 'svg',
            searchText: '',
            svgIcons,
            elementIcons,
            vxeIcons,
        };
    },
    computed: {
        searchName: {
            get() { return this.value; },
            set(val) { this.$emit('input', val); }
        },
        currentIcons() {
            switch (this.activeTab) {
                case 'element': return this.elementIcons;
                case 'vxe': return this.vxeIcons;
                default: return this.svgIcons;
            }
        },
        filteredIcons() {
            return this.currentIcons.filter(icon =>
                icon.toLowerCase().includes(this.searchText.toLowerCase())
            );
        }
    },
    methods: {
        open() {
            this.showPopup = true;
            this.searchText = '';
        },
        selectIcon(icon) {
            this.VxeUI.clipboard.copy(icon)
            this.$message.success(`已复制: ${icon}`);
            this.searchName = icon;
            this.showPopup = false;
        },
        filterIcons() {
            // 搜索功能已通过计算属性实现
        }
    }
};
</script>

<style lang="scss" scoped>
.icon-picker-container {
    padding: 30px 15px;
    overflow-x: hidden;

    .search-input {
        margin: 15px 0;
    }

    .icon-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
        max-height: 450px;
        overflow-y: auto;
        padding: 10px;

        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                background: #f5f7fa;
                transform: scale(1.05);

                .icon-name {
                    color: #409eff;
                }
            }

            .icon-preview {
                font-size: 24px;
                margin-bottom: 8px;

                .el-icon,
                .vxe-icon {
                    font-size: 24px;
                    color: #606266;
                }

                .svg-icon {
                    width: 1em;
                    height: 1em;
                }
            }

            .icon-name {
                font-size: 12px;
                text-align: center;
                word-break: break-all;
                color: #666;
            }
        }
    }
}
</style>